<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-06 16:09:15
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-06-25 14:54:49
 * @FilePath: \ken147258.topayClient\src\views\payer\personalInfo\info.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-card>
      <h2>绑定GOOGLE验证</h2>
      <p>为了你的商户资金安全,你可授权绑定GOOGLE验证,谢谢合作！</p>
      <div flex flex-row items-end mb-10px>
        <span class="info-label">绑定GOOGLE身份验证</span>
        <div ml-26px inline-block h-200px>
          <el-skeleton style="width: 200px" :loading="loading" animated>
            <template #template>
              <el-skeleton-item variant="image" style="width: 200px; height: 200px" />
            </template>
            <template #default>
              <el-image
                :src="codeurl"
                alt="google"
                class="image"
              />
            </template>
          </el-skeleton>
        </div>
      </div>
      <div style="margin-left: 190px">
        <div>
          <el-input
            v-model="secret"
            style="width: 240px"
            placeholder="Please input"
          /><el-button type="primary" style="margin-left: 10px" @click="handleCopy()"
            >复制</el-button
          >
        </div>
        <div style="margin-top: 10px">
          <el-input
            v-model="input"
            style="width: 240px"
            placeholder="所需绑定GOOGLE验证码,请扫码获取GOOGLE验证码"
          />
        </div>
        <div style="margin-top: 10px">
          <el-button type="primary" @click="submitBind">提交绑定</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const input = ref("");
import { getGoogleCode as getCode, getBind } from "@/api/other/user";
defineOptions({
  name: "info",
  inheritAttrs: false,
});
const codeurl = ref("");
const secret = ref("");
import { ElMessage } from "element-plus";

const { copy } = useClipboard({ legacy: true });
const loading = ref(true);

onMounted(() => {
  getCodeFun();
});
const getCodeFun = () => {
  getCode().then((res) => {
    codeurl.value = res.qr_code_url;
    secret.value = res.secret;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  });
};

const submitBind = () => {
  getBind({ secret: secret.value, code: input.value }).then((res) => {
    if (res.code == 200) {
      ElMessage.success(res.message);
    } else {
      ElMessage.error(res.message);
    }
  });
};

function handleCopy() {
  copy(secret.value).then(() => {
    ElMessage.success("复制成功");
  });
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  background: #fff;
  padding: 24px;
  .info-label {
    width: 170px;
    display: inline-block;
    margin-bottom: 10px;
  }
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
</style>
